<template>
    <div class="user-mine" v-if='pageLoaded'>
        <div class="mine-header" v-if='hasMine'>
            <div class="mine-header__avatar">
                <span class="avatar"><img :src="mine.user.avatar || placeholderImg" alt=""></span>
                <p>{{mine.user.realName}}</p>
            </div>
            <ul class="mine-header__list">
                <li class="mine-header__item" @click='goUserBindCardVerified'>
                    <img v-if='mine.bankcard' src="../images/bank_active.png">
                    <img v-else src="../images/bank.png">
                    <p>银行卡</p>
                    <span v-if='mine.bankcard'>{{mine.bankcard.cardNo | bankCard}}</span>
                    <span v-else class='no-card'>未绑卡</span>
                </li>
                <li class="mine-header__item" @click='goUserPasswordManage'>
                    <img src="../images/password_active.png" alt="">
                    <p>密码管理</p>
                    <span></span>
                </li>
                <li class="mine-header__item" @click='goUserCreditReportIndex'>
                    <img v-if='userInfo.authState == "ok"' src="../images/report_active.png" alt="">
                    <img v-else src="../images/report.png" alt="">
                    <p>信用报告</p>
                    <span>借款必备</span>
                </li>
            </ul>
        </div>
        <div class="mine-main">
            <ul class="menu-list">
                <li class="menu__item" @click='goRouter("help")'>
                    <img src="../images/mine_help.png">
                    <p>使用帮助</p>
                    <i class='iconfont icon-arrow'></i>
                </li>
                <li class="menu__item" @click='goRouter("about")'>
                    <img src="../images/ming_feedback.png">
                    <p>关于我们</p>
                    <i class='iconfont icon-arrow'></i>
                </li>
            </ul>
            <div class="logout">
                <span class="button long" @click='show_modal_logout = true'>退出登录</span>
            </div>
        </div>

        <confirm 
            :show='show_modal_logout'
            @close='show_modal_logout = false'
            @confirm='logout'
            title='确认退出'
            tips='是否确认退出'></confirm>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import bankCard from '../filters/filter-bankCard'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { userApi, lenderApi, loginApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        filters:{
            bankCard
        },
        data() {
            return {
                pageLoaded:false,
                mine:{},
                show_modal_logout:false,
                placeholderImg:require('../images/loading_1.png'),
                tabIndex:0,
                payways:[{
                    value:0,
                    display:'还款方式1'
                },{
                    value:1,
                    display:'还款方式2'
                },{
                    value:2,
                    display:'还款方式3'
                }],
                rechargeMoney:'',
                show_modal_loan_detail:false,
                argeement:true,
                payway:-1,
                showDetail:false,
                payPasswordShow:false,
                payStatus:'',
                password:'',
                placeholder:'--',
                userCount:'',
                listInfo:{},
                records:[],
                loading:true,
                loading_count:true,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            hasMine(){
                return !_.isEmpty(this.mine)
            },
            userInfo(){
                return this.localInfo.userInfo
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setNeedLogin',
                'setHasTradePassword'
            ]),
            // function

            goRouter(name){
                this.$router.push({
                    name:name
                })
            },
            clear(){
                localStorage.clear()
            },
            logout(){
                this.showLoading()
                loginApi.logout()
                .then(result=>{
                    let sessionId = this.localInfo.sessionId
                    this.hideLoading()
                    // this.setSessionId('')
                    this.setNeedLogin(true)
                    this.$router.push({
                        name:'bind-phone'
                    })
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })
            },
            goUserBindCardVerified(){
                if(this.mine.user && this.mine.user.validState == 'OK' ){
                    this.$router.push({
                        name:'user-bind-card-list'
                    })
                    return
                }
                this.$router.push({
                    name:'user-bind-card-verified',
                    query:{
                        from:'user-mine'
                    }
                })
            },
            goUserPasswordManage(){
                this.$router.push({
                    name:'user-password-manage'
                })
            },
            goUserCreditReportIndex(){
                this.$router.push({
                    name:'user-credit-report-index',
                    params:{
                        no:'default'
                    }
                })
            },
            withDrawAll(){
                this.withDrawMoney = 600
            },
            test(){
                console.log(1)
            },
            goPay(){
                this.payStatus = true
                console.log(1)
            },
            getMine(num){
                this.showLoading()
                userApi.mine()
                .then(result=>{
                    this.mine = result
                    this.setHasTradePassword(result.user.hasTradePassword)
                    this.pageLoaded = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.pageLoaded = true
                    this.hideLoading()
                })
            },
        },
        created(){
            this.getMine()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-mine{
        .mine-header{
            background-color: #fff;
        }
        .mine-header__avatar{
            text-align: center;
            position: relative;
            overflow:hidden;
            .avatar{
                margin-bottom: 8px;
                margin-top: 16px;
                position: relative;
                display: block;
                background-color: #fff;
                img{
                    background-color: #fff;
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    border:1px solid $sectionColor;
                    position: relative;
                    z-index:2;
                }
                &:after{
                    content:'';
                    position: absolute;
                    top:50%;
                    border-top:1px solid $sectionColor;
                    left:16px;
                    right:16px;
                }
            }
            p{
                @extend %font-subhead;
                color:$importColor;
            }
        }
        .mine-header__list{
            display: flex;
            padding-top: 25px;
            .no-card{
                color:$grayLight;
            }
        }
        .mine-header__item{
            width: 30%;
            flex:1;
            text-align: center;
            img{
                width: 72px;
                height: 72px;
            }
            p{
                @extend %font-subhead;
                padding-top: 16px;
                color:$importColor;
            }
            span{
                @extend %font-caption;
                display: block;
            }
            padding-bottom: 24px;
        }
        .logout{
            padding:10px 16px;
            text-align:center;
            p{
                color:$orange;
            }
        }
    }

</style>
